<template>
  <div v-if="show" class="CommodityDetails">
    <div class="header">
      <img :src="$base.baseImg + commodityData.img[0]" />
    </div>
    <div class="box">
      <h3>{{ commodityData.proName }}</h3>
      <p>
        价格：<span>￥{{ (commodityData.price / 100).toFixed(2) }}</span>
      </p>
      <p>已售：{{ commodityData.sold }}</p>
      <div class="num">购买数量：<van-stepper v-model="value" /></div>
    </div>
    <!-- <div class="detial">
      <h3>商品详情</h3>
      <img
        v-for="(item, index) in commodityData.img"
        :key="index"
        :src="$base.baseImg + item"
        alt=""
      />
    </div> -->
    <!-- 提交按钮 -->
    <div class="button">
      <van-button
        type="primary"
        color="#D2A166"
        @click="submitApplyMerchant"
        block
        size="normal"
        >立刻购买</van-button
      >
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
import { Button, Stepper } from "vant";
Vue.use(Stepper);
Vue.use(Button);
@Component({})
export default class CommodityDetails extends Vue {
  private commodityData = {
    sku: 0,
    online: "0",
  };

  private show = false;
  private value = 1;
  private mounted() {
    this.$common.getAuthToken(this.getData);
  }
  private getData(): void {
    this.$post(`proDetails`, {
      sku: Number(this.$route.params.id),
    }).then((res: any) => {
      if (res.code == 0) {
        this.commodityData = res.data;
        this.show = true;
      }
    });
  }
  private submitApplyMerchant() {
    this.$router.push({
      path: "/submitOrder/0",
      query: {
        skuList: JSON.stringify([
          { sku: Number(this.commodityData.sku), num: this.value },
        ]),
        online: this.commodityData.online,
      },
    });
  }
}
</script>

<style lang="scss">
.CommodityDetails {
  width: 100%;
  box-sizing: border-box;
  .header {
    width: 100%;
    img {
      // height: 400px;
      width: 100%;
    }
  }
  .box {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    background-color: #ffffff;
    margin-bottom: 100px;
    h3 {
      font-size: 32px;
      font-weight: 400;
      color: #000000;
      line-height: 1;
    }
    p {
      font-size: 28px;
      font-weight: 300;
      color: #333333;
      line-height: 1.5;
      span {
        color: #f53131;
      }
    }
    .num {
      display: flex;
      font-size: 28px;
      font-weight: 300;
      color: #333333;
      line-height: 1.5;
      justify-content: space-between;
    }
  }
  .detial {
    width: 100%;
    h3 {
      font-size: 32px;
      font-weight: 400;
      color: #000000;
      line-height: 3;
      text-align: center;
    }
    img {
      width: 100%;
      display: block;
    }
  }
  .button {
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
    box-sizing: border-box;
    background-color: #fff;
  }
}
</style>